<template>
  <div class="componentList">
    <!-- ********** 小组件 ********** -->
    <!-- 导航栏 -->
    <Navbar v-if="com=='navbar'" :widgetData="widgetData" :type="type" :mapData="mapData"></Navbar>
    <!-- 海报位 -->
    <Poster v-if="com=='Poster'" :widgetData="widgetData" :type="type" :mapData="mapData"></Poster>
    <!-- 文字海报 -->
    <Textposter v-if="com=='Textposter'" :widgetData="widgetData" :type="type" :mapData="mapData"></Textposter>
    <!-- 轮播海报 -->
    <BannerBar v-if="com=='BannerBar'" :widgetData="widgetData" :type="type" :mapData="mapData"
      :bannerIndex="bannerIndex" :bannerSiteCode="bannerSiteCode" :ispreview="ispreview"
      @preView="getPreView" @addImg="getAddImg" @deleteItem="getDeleteItem">
    </BannerBar>
    <!-- 视频框 -->
    <VideoBar v-if="com=='VideoBar'" :widgetData="widgetData" :type="type" :mapData="mapData"></VideoBar>
    <!-- 轮播视频 -->
    <BannerVideo v-if="com=='BannerVideo'" :widgetData="widgetData" :type="type" :mapData="mapData"
      :bannerVideoIndex="bannerVideoIndex" :bannerVideoSideCode="bannerVideoSideCode" @checkedTitle="checkedTitle">
    </BannerVideo>
    <!-- 轮播视频 —— 定制 -->
    <BannerVideo1 v-if="com=='BannerVideo1'" :widgetData="widgetData" :type="type" :mapData="mapData">
    </BannerVideo1>

    <!-- ********** 定制组件-普通海报 ********** -->
    <!-- 一行三列 -->
    <RowThreeColPoster v-if="com=='RowThreeColPoster'" :widgetData="widgetData" :mapData="mapData"
      :type="type" @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowThreeColPoster>
    <!-- 一行六列 -->
    <RowSixColPoster v-if="com=='RowSixColPoster'" :widgetData="widgetData" :mapData="mapData"
      :type="type" @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowSixColPoster>
    <!-- 一行十列 -->
    <RowTenColPoster v-if="com=='RowTenColPoster'" :widgetData="widgetData" :mapData="mapData"
      :type="type" @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowTenColPoster>

    <!-- ********** 定制组件-文字海报 ********** -->
    <!-- 一行两列 -->
    <RowTwoColText v-if="com=='RowTwoColText'" :widgetData="widgetData" :mapData="mapData"
      :type="type" @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowTwoColText>
    <!-- 一行三列 -->
    <RowThreeColText v-if="com=='RowThreeColText'" :widgetData="widgetData" :mapData="mapData"
      :type="type" @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowThreeColText>
    <!-- 一行四列 -->
    <RowFourColText v-if="com=='RowFourColText'" :widgetData="widgetData" :mapData="mapData"
      :type="type" @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowFourColText>
    <!-- 一行六列 -->
    <RowSixColText v-if="com=='RowSixColText'" :widgetData="widgetData" :mapData="mapData"
      :type="type" @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowSixColText>
  </div>
</template>

<script>
// 小组件
import Navbar from '@/components/visualization/model/widgetList/navbar.vue'; //导航栏
import Poster from '@/components/visualization/model/widgetList/poster.vue'; //海报位
import Textposter from '@/components/visualization/model/widgetList/textposter.vue'; //文字海报
import BannerBar from '@/components/visualization/model/widgetList/bannerBar.vue'; //轮播海报
import VideoBar from '@/components/visualization/model/widgetList/videoBar.vue'; //视频框
import BannerVideo from '@/components/visualization/model/widgetList/bannerVideo.vue'; //轮播视频
import BannerVideo1 from '@/components/visualization/model/widgetList/bannerVideo1.vue'; //轮播视频-定制

// 定制组件-普通海拔
import RowThreeColPoster from '@/components/visualization/model/customMadeWidget/rowThreeColPoster.vue'; //1-3
import RowSixColPoster from '@/components/visualization/model/customMadeWidget/rowSixColPoster.vue'; //1-6
import RowTenColPoster from '@/components/visualization/model/customMadeWidget/rowTenColPoster.vue'; //1-10
// 定制组件-文字海报
import RowTwoColText from '@/components/visualization/model/customMadeWidget/rowTwoColText.vue'; //1-2
import RowThreeColText from '@/components/visualization/model/customMadeWidget/rowThreeColText.vue'; //1-3
import RowFourColText from '@/components/visualization/model/customMadeWidget/rowFourColText.vue'; //1-4
import RowSixColText from '@/components/visualization/model/customMadeWidget/rowSixColText.vue'; //1-6

export default {
  name: "componentList",
  components: {
    Navbar,Poster,Textposter,BannerBar,VideoBar,BannerVideo,BannerVideo1,
    RowThreeColPoster,RowSixColPoster,RowTenColPoster,
    RowTwoColText,RowThreeColText,RowFourColText,RowSixColText
  },
  props: {
    com: {
      type:String,
      required: true,
    },
    widgetData: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: 'widgetList'
    },
    // 轮播海报
    bannerIndex:{//模板参数
      type: Number,
      default: 0
    },
    bannerSiteCode:{//瀑布流参数
      type: String,
      default: ''
    },
    // 轮播视频
    bannerVideoIndex:{//模板参数
      type: Number,
      default: 0
    },
    bannerVideoSideCode:{//瀑布流参数
      type: String,
      default: ''
    },
    // 定制组件
    customMadeSiteCode:{
      type: String,
      default: ""
    },
    // 热力图
    mapData:{
      type: Array,
      default: () => []
    },
    ispreview:{
      type:Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  methods: {
    // 轮播海报添加图片
    getAddImg(){
      let data = {};
      if(this.com == 'BannerBar'){ data = this.widgetData; };
      this.$emit('getAddImg',data);
    },
    // 轮播海报预览图片
    getPreView(e,item,index,data){
      this.$emit('getPreView',e,item,index,data);
    },
    // 轮播海报删除图片
    getDeleteItem(index){
      let data = {};
      if(this.com == 'BannerBar'){ data = this.widgetData; };
      this.$emit('getDeleteItem',index,data);
    },
    // 轮播视频预览海报
    checkedTitle(e,item,index,data){
      this.$emit('checkedTitle',e,item,index,data);
    },
    // 定制组件
    configData(e,item,items){
      this.$emit('configData',e,item,items)
    }
  },
}
</script>

<style lang="less" scoped>
.componentList {
  width: 100%;
  height: 100%;
}
</style>